:root{
	--main-dark-bg: #080F2A;
	--main-dark-color: #DFFDFE;
	--main-dark-border: #3E90D4;
	--main-left-primary: #28b9c9;
	--main-left-primary2: #2385ca;
	--main-left-ulbg: #f6f7f8;
	--main-top-bg: #262b36;
	--main-menu-color: #505b72;
	--easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
	--easeOutCirc: cubic-bezier(0, 0.55, 0.45, 1);
}

.rowmax{width: 100%;height: 0;}

.evenone{pointer-events: none;}
a,.handle{cursor: pointer;}
.dragmove{cursor: move;}
.transition {
	transition: all 0.3s ease-out;
}

.logo-header{width: 100%;margin: 0 auto; padding: 20px;}
.logo-header img{max-width: 80px;height: 80px;display: block;margin: 0 auto;}
/** 顶部导航栏 */
.tool-header{
	width: 100%;height: 70px;background-color: var(--main-top-bg);
}
#menu{height: 60px;}
#menu li{background-color: var(--main-menu-color);color: white;font-size: 15px;line-height: 2.3; padding: 0 1em; cursor: pointer;}
#menu li.active{background-color: var(--main-left-primary2);}

/** 标签页按钮 */
#pagetags{width: 100%; height: 26px; margin: 0 auto;}
.pagetags{
	max-width: 80%; margin: -10px auto 0; padding: 0 20px; position: relative; z-index: 1;
	border-radius: 60px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
	background-color: #3b4354; box-shadow: rgba(0, 0, 0, 0.3) 0 10px 12px -6px;
}
.pagetags ul{flex-wrap:nowrap; scroll-behavior: smooth;position: relative;}
.pagetags li{
	display: block; font-size: 13px; height: 18px; line-height: 17px;
	min-width: 90px; max-width: 110px; padding: 0 1em; text-align: center;
	color: #9097a7; border-left: var(--main-menu-color) 1px solid; cursor: pointer;
	position: relative;overflow: hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pagetags>li{min-width: 40px;}
.pagetags li:first-child{border-left: none;}
.pagetags ul li.active{
	background-color: var(--main-left-primary); color: white;
}
.pagetags li:hover{
	background-color: var(--main-menu-color); color: white;
}
.pagetags ul li .close{
	position: absolute;right: 2px;top: 2px;
	display: none;width: 16px;height: 12px;line-height: 10px;text-align: center;
}
.pagetags ul li .close::after{content: '×';}
.pagetags ul li:hover .close{display: block;}
.pagetags ul li .close:hover{background-color: var(--main-left-primary2);}
#pagetags:hover li{height: 36px;line-height: 35px;}

#pagetags .rightbtn a{font-size: 16px; line-height: 1.8; padding: 0 0.4em;margin: 0 4px;}
#pagetags .rightbtn a:hover{background-color: var(--main-left-primary2); color: white;}


.c_left {
	float: left;
	width: 180px;
	height: 100%;
	position: relative;
	box-shadow: inset -4px 0 36px rgba(0,0,0,0.16);
	transition: width 0.6s var(--easeOutQuint);
}

.c_main {
	width: auto;
	height: 100%;
	margin-left: 180px;
	overflow: auto;
	position: relative;
	background-color: #f5f7f8;
	transition: margin-left 0.6s var(--easeOutCirc);
}
.leftback{
	width: 26px;height: 50px;position: absolute;right: -16px;bottom: 30px;z-index: 999;
	font-size: 20px;line-height: 50px; color: #FFF;cursor:pointer; text-align: center;
	background-color: var(--main-left-primary2);border-radius: 3px;
	background: linear-gradient(145deg, var(--main-left-primary2), var(--main-left-primary));
	box-shadow: 6px 6px 16px rgba(17, 120, 180, 0.3);
}
.leftback svg{margin: 0;}
.mainfull .c_left{width: 0; border-right: var(--main-left-primary) 4px solid;}
.mainfull .c_main{margin-left: 0;}
.mainfull .leftback{right:-26px;transform: scaleX(-1)}

/** 左侧菜单 */
.c_left dl,.c_left dl ul{width: 100%;}
.c_left dl{border-bottom: #d8dce3 1px solid;}
.c_left dl dt{
	width: 100%;cursor: pointer;font-size: 1.15em;text-indent: 1.3em;line-height: 2.6;margin: 0;
	transition: all 0.5s ease; background-color: white; color: var(--main-menu-color);
}
.c_left dl dt.active{
	color: white; background-color: var(--main-left-primary); background-image: linear-gradient(to right, var(--main-left-primary2) 0%, var(--main-left-primary) 100%);
}
.c_left dl dt:not(.active):hover{color: var(--main-left-primary)}
.c_left dl svg,.c_left dl img.ico{margin-right: 0.4em; color: var(--main-left-primary2)}
.c_left dl dt.active svg{color: white;}
.c_left dl img.ico{height: 1em;vertical-align: -0.15em;}
.c_left dl a{display: block;width: 100%;text-indent: 1em;padding: 0.3em 0;margin: 2px 0;color: #666; position: relative;}
.c_left dl a:hover,.c_left dl a.active{color: var(--main-left-primary);}
.c_left dl ul{max-height: 0;overflow: hidden;padding-left: 19px;position: relative;background-color: var(--main-left-ulbg);}
.c_left dl >ul{transition: all 0.3s ease-out;}
.c_left dl dt.active + ul, .c_left dl a.active + ul{max-height: 500px;}
.c_left dl li{border-left: #ddd 1px solid;}

.c_left dl ul:before {
    border-top: 7px solid var(--main-left-primary2);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";display: inline-block;
    position: absolute;left: 12px;top: 0;
}
.c_left dl a:before {
    content: '';position: absolute;left: -3px;top: 50%;
    width: 5px;height: 5px;margin-top: -2px;
    background-color: #9fa8bc;
    border-radius: 50%;
    transition: all 0.2s ease-out 0s;
}
.c_left dl a:after {
    content: '';position: absolute;left: -17px;top: 50%;
    width: 30px;height: 30px;margin-top: -16px;
    border: 1px solid #9fa8bc;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.2s ease-out 0s;
}
.c_left dl a:hover:after, .c_left dl a.active:after {
    opacity: 1;left: -6px;margin-top: -5px;
    width: 9px;height: 9px;
}

.innerbox{
	overflow: auto;
}
/*滚动条样式*/
.innerbox::-webkit-scrollbar {/*滚动条整体样式*/
	width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
	height: 3px;
}
.innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
	border-radius: 6px;
	/* background: rgb(19, 210, 223); */
	background-image: linear-gradient(to bottom, 
	rgba(19, 210, 223, 0.2) 0%,
	rgba(19, 210, 223, 0.6) 9%,
	rgb(19, 210, 223) 50%,
	rgba(19, 210, 223, 0.6) 91%,
	rgba(19, 210, 223, 0.2) 100%
	);
}
.innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
	width: 4px;
	border-radius: 0;
	background: rgba(255,255,255,0.3);
}

.innerscroll{
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--main-left-primary) rgba(116, 116, 116, 0.3);
}

/*3D效果*/
.p3d{ perspective:800px;/*视角观察距离*/}
.p3d .box3d{
    transform-style:preserve-3d;transform-origin: 50% 50%;
    -moz-transform-style:preserve-3d;
}